﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>试卷管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../static/css/font.css">
    <link rel="stylesheet" href="../../../static/css/weadmin.css">
    <style type="text/css">
        .layui-card {
            margin-bottom: 0px;
        }

        .layui-card-header {
            border: 1px solid #f6f6f6;
            font-weight: bold;
        }

        .layui-table, .layui-table-view {
            margin: 0px;
        }

        .layui-form-checkbox[lay-skin=primary] {
            padding-left: 0px;
        }

        .longtext {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="weadmin-body">
        <!--<div class="layui-row">
        试卷名称：啊啊啊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;试卷满分：100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>-->
        <!--<form class="layui-form">
            <div class="layui-form-item">-->
        <div class="layui-row" style="padding-bottom:10px;">
            查询
            <!--<label for="ETID" class="layui-form-label">
        <span class="we-red">*</span>试题类型
    </label>
    <div class="layui-input-inline">
        <select id="ETID" name="ETID" class="valid" lay-filter="ETID">
            <option value="1">选择题</option>
            <option value="2">判断题</option>
            <option value="3">填空题</option>
            <option value="4">简答题</option>
            <option value="5">综合题</option>
        </select>
    </div>-->
            <div class="layui-inline">
                <input type="text" id="stx" placeholder="题型" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" id="szsd" placeholder="知识点" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" id="sreach"><i class="layui-icon">&#xe615;</i></button>
        </div>
            <!--</div>
        </form>-->
                <div class="layui-col-xs6 layui-col-md4">
                    <!-- 填充内容 -->
                    <div class="layui-card">
                        <div class="layui-card-header">全部试题列表</div>
                        <div class="layui-card-body" id="loadlist" style="overflow-y:scroll; padding:0;">
                            <table id="list" class="layui-table layui-form">
                                <colgroup>
                                    <col width="45">
                                    <col width="60">
                                    <col width="80">
                                    <col width="60">
                                    <col>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>编号</th>
                                        <th>题型</th>
                                        <th>分数</th>
                                        <th>知识点</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">试题详情</div>
                        <div class="layui-card-body">
                            试题内容：<br />
                            <div id="showEQContent"></div>
                            试题答案：<br />
                            <div id="showEQAnswer"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">已选试题列表</div>
                        <div class="layui-card-body" id="loadlist2" style="overflow-y:scroll; padding:0;">
                            <table id="list2" class="layui-table layui-form">
                                <colgroup>
                                    <col width="45">
                                    <col width="60">
                                    <col width="80">
                                    <col width="60">
                                    <col>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>编号</th>
                                        <th>题型</th>
                                        <th>分数</th>
                                        <th>知识点</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md2">
                    <div class="layui-card">
                        <div class="layui-card-header">试卷信息</div>
                        <div class="layui-card-body ">
                            试卷分数：<div id="showEPFullMarks"></div>
                            应试部门：<div id="showDepNames"></div>
                            已选题数：<br />
                            <div id="showCheckedTs"></div>
                            已选分数：<br />
                            <div id="showCheckedZf"></div>
                        </div>
                        <div class="layui-card-body">
                            <button id="btnSave" class="layui-btn">保存试卷</button>
                        </div>
                    </div>
                </div>
            </div>
            <script src="../../../lib/layui/layui.js" charset="utf-8"></script>
            <script src="../../../static/js/common.js" charset="utf-8"></script>
            <script>
                layui.use(['jquery', 'layer', 'form'], function () {
                    var $ = layui.jquery,
                        form = layui.form,
                        layer = layui.layer;
                    $.support.cors = true;
                    $.ajaxSetup({
                        cache: false,
                        headers: {
                            "userid": JSON.parse(window.localStorage.authInfo).UserId,
                            "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                        },
                    })
                    var allTrs;//存储所有试题信息，查询时不再请求api
                    $("#loadlist,#loadlist2").css("height", $("body").height() - 58 - 46);
                    //试卷ID
                    var epid = getUrlParam("ID");
                    //知识点列宽度，用于超出列宽以...显示
                    var zsdwidth = $("#list2 thead tr:first th:eq(4)").width();
                    //获取试卷信息
                    $.ajax({
                        url: ApiUrl + "ExamPaperMain/GetSingle",
                        type: 'get',
                        data: { id: getUrlParam("ID"), fields: "EPFullMarks" },
                        success: function (data) {
                            if (data.StatusCode == 200 && data.Count != 0) {
                                $("#showEPFullMarks").html(data.Data[0].EPFullMarks);
                                $("#showDepNames").html(data.Data[0].DepNames);
                            }
                        }
                    });

                    ////加载试题类型信息
                    //$.ajax({
                    //    url: ApiUrl + "ExamType/SelList",
                    //    type: 'post',
                    //    success: function (data) {
                    //        if (data.StatusCode == 200 && data.Count != 0) {
                    //            $(data.Data).each(function (index, item) {
                    //                $("#ETID").append("<option value='" + item.ETID + "'>" + item.ETName + "</option>");
                    //            });
                    //            form.render();
                    //        }
                    //        else if (data.StatusCode == 403) {
                    //            top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                    //                top.location.href = "http://" + top.location.host + "/login.html";
                    //            })
                    //        }
                    //        else {
                    //            layer.msg(data.Info);
                    //        }
                    //    }
                    //});
                    //加载全部试题
                    var listajax = $.ajax({
                        url: ApiUrl + "ExamQuestions/SelListForSelQuestion",
                        type: 'get',
                        success: function (data) {
                            if (data.StatusCode == 200 && data.Count != 0) {
                                //加载已选试题表格
                                $(data.Data).each(function (index, item) {
                                    $("#list tbody").append(GetHtmlStr(item, false));
                                    allTrs = data.Data;
                                });
                                form.render();
                            }
                        }
                    });
                    //获取已选试题
                    var checkQuestions;
                    var list2ajax = $.ajax({
                        url: ApiUrl + "ExamPaperDetail/GetPaperQuestions",
                        type: 'get',
                        data: { EPID: epid },
                        success: function (data) {
                            if (data.StatusCode == 200 && data.Count != 0) {
                                checkQuestions = data.Data;
                                //加载已选试题表格
                                $(data.Data).each(function (index, item) {
                                    $("#list2 tbody").append(GetHtmlStr(item, true));
                                });
                                form.render();
                                SetCheckedInfo();
                            }
                        }
                    });
                    //两个表加载完成后，根据已选列表数据，勾选全部试题数据
                    $.when(listajax, list2ajax)
                        .done(function () {
                            $(checkQuestions).each(function (index, item) {
                                $("#cb_" + item.EQID).prop("checked", true);
                            });
                            form.render();
                        });
                    //获取已选题目的数量和总分
                    function SetCheckedInfo() {
                        var trs = $("#list2 tbody tr");
                        var ts = trs.length;
                        var zf = 0;
                        $(trs).each(function (item) {
                            zf += $(this).data("eqscore");
                        });
                        $("#showCheckedTs").html(ts);
                        $("#showCheckedZf").html(zf);
                    }
                    //生成表格tr的html
                    function GetHtmlStr(item, ischecked) {
                        var htmlstr = '<tr id="tr' + (ischecked ? "2" : "") + '_' + item.EQID + '" data-eqid="' + item.EQID + '" data-etname="' + item.ETName + '" data-eqscore="' + item.EQScore + '" data-etorder="' + item.ETOrder + '" data-kkname="' + item.KKName + '">';
                        htmlstr += '<td><input type="checkbox" ' + (ischecked ? "checked" : "") + ' id="cb' + (ischecked ? "2" : "") + '_' + item.EQID + '" lay-skin="primary" lay-filter="check' + (ischecked ? "2" : "") + '" /></td>';
                        htmlstr += '<td>' + item.EQID + '</td>';
                        htmlstr += '<td>' + item.ETName + '</td>';
                        htmlstr += '<td>' + item.EQScore + '</td>';
                        htmlstr += '<td><div class="longtext" style="width:' + zsdwidth + 'px" title="' + item.KKName + '">' + item.KKName + '</div></td>';
                        htmlstr += '</tr>';
                        return htmlstr;
                    }
                    //监听行单击事件
                    $('#list').on('click', 'tbody tr', function (event) {
                        //alert($(this).data('eqid'));
                        //异步请求试题内容及答案，显示到相应位置
                        $.ajax({
                            url: ApiUrl + "ExamQuestions",
                            type: 'get',
                            contentType: 'application/json',//dynamic接收参数时需要加上此行
                            data: { EQID: $(this).data('eqid') },
                            success: function (data) {
                                if (data.StatusCode == 200 && data.Count != 0) {
                                    $("#showEQContent").html(data.Data.EQContent);
                                    $("#showEQAnswer").html(data.Data.EQAnswer);
                                }
                                else if (data.StatusCode == 403) {
                                    top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                                        top.location.href = "http://" + top.location.host + "/login.html";
                                    })
                                }
                                else {
                                    layer.msg(data.Info);
                                }
                            }
                        });

                        event.stopPropagation();
                    });
                    //监听勾选事件
                    form.on('checkbox(check)', function (data) {
                        var checkdata = $(data.elem).parent().parent().data();
                        var checkitem = {
                            EQID: checkdata.eqid,
                            ETName: checkdata.etname,
                            ETOrder: checkdata.etorder,
                            EQScore: checkdata.eqscore,
                            KKName: checkdata.kkname
                        };
                        //操作list2
                        if (data.elem.checked) {
                            $("#list2 tbody").append(GetHtmlStr(checkitem, true));
                            form.render();
                        }
                        else {
                            $("#tr2_" + checkdata.eqid).remove();
                        }
                        //计算已选试题分数等操作
                        SetCheckedInfo();
                        //阻止冒泡激发tr事件
                        var event = event ? event : window.event;
                        event.stopPropagation();
                    });
                    form.on('checkbox(check2)', function (data) {
                        var checkdata = $(data.elem).parent().parent().data();
                        //操作list
                        if (!data.elem.checked) {
                            $("#cb_" + checkdata.eqid).prop("checked", false);
                            $("#tr2_" + checkdata.eqid).remove();
                            form.render();
                            SetCheckedInfo();
                        }
                    });
                    //保存试卷选题
                    $("#btnSave").click(function () {
                        if ($('#list2 tbody tr').length <= 0) {
                            layer.alert("请选择试卷试题");
                            return;
                        }
                        if ($('#showEPFullMarks').html() != $('#showCheckedZf').html()) {
                            layer.alert("已选总分和试卷要求总分不匹配，请重新选题");
                            return;
                        }
                        var eqids = "";
                        $('#list2 tbody tr').each(function (item) {
                            eqids += $(this).data("eqid") + "-" + $(this).data("etorder") + "|";
                        })
                        eqids = eqids.substring(0, eqids.length - 1);
                        $.ajax({
                            url: ApiUrl + "ExamPaperDetail/UpdatePaperQuestions",
                            type: 'post',
                            contentType: 'application/json',//dynamic接收参数时需要加上此行
                            data: JSON.stringify({ EPID: epid, EQIDS: eqids }),
                            success: function (data) {
                                if (data.StatusCode == 200 && data.Count != 0) {
                                    console.log(data)
                                    layer.alert("保存成功", { icon: 6 }, function (index) {
                                        parent.layer.closeAll();
                                    })
                                }
                                else if (data.StatusCode == 403) {
                                    top.layer.alert(data.Info + ",请重新登录！", { closeBtn: 0 }, function () {
                                        top.location.href = "http://" + top.location.host + "/login.html";
                                    })
                                }
                                else {
                                    layer.msg(data.Info);
                                }
                            }
                        });
                    })
                    //查询试题，并在查询后加载勾选已选试题
                    $("#sreach").click(function () {
                        var stx = $("#stx").val();
                        //var stx=document.getElementById('ETID')[document.getElementById('ETID').value].text
                        var szsd = $("#szsd").val();
                        if (stx != "" || szsd != "") {
                            $("#list tbody").html("");
                            $(allTrs).each(function (index, item) {
                                if (item.ETName.indexOf(stx) >= 0 && item.KKName.indexOf(szsd) >= 0)
                                    $("#list tbody").append(GetHtmlStr(item, false));
                            });
                        }
                        else {
                            $("#list tbody").html("");
                            $(allTrs).each(function (index, item) {
                                $("#list tbody").append(GetHtmlStr(item, false));
                            });
                        }
                        $($("#list2 tbody tr")).each(function (item) {
                            $("#cb_" + $(this).data("eqid")).prop("checked", true);
                        });
                        //form.render();
                    })
                });
            </script>
</body>
</html>